<template>
  <div class="resume g-wrap">
    <mt-header fixed title="培养计划学生详情">
      <router-link to="/teacher/training" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>

    <div v-if="noData" class="noData">
      暂无数据
    </div>

    <div v-if="!!infoData" class="infoBox">
      <mt-cell title="姓名" :value="infoData.xm"></mt-cell>
      <mt-cell title="学号" :value="infoData.xh"></mt-cell>
      <mt-cell title="培养单位" :value="infoData.dwmc"></mt-cell>
      <mt-cell title="专业" :value="infoData.zymc"></mt-cell>
      <mt-cell title="年级" :value="infoData.sznj"></mt-cell>
      <mt-cell title="培养方案" :value="infoData.pyfamc"></mt-cell>
    </div>
    <div v-if="!!pyfa" class="mainTitle g-mar-top30 g-mar-bottom20">培养方案要求</div>
    <div v-if="!!pyfa" class="infoBox">
      <mt-cell title="必修课程总数（门）" :value="pyfa.bxkms"></mt-cell>
      <mt-cell title="选修课程总数（门）" :value="pyfa.xxkms"></mt-cell>
      <mt-cell title="学位课课程总数（门）" :value="pyfa.xwkms"></mt-cell>
      <mt-cell title="最低学分（分）" :value="pyfa.kczxf"></mt-cell>
      <mt-cell title="最高学分（分）" :value="pyfa.kczgxf"></mt-cell>
      <mt-cell title="选修课总学分（分）" :value="pyfa.xxkxf"></mt-cell>
      <mt-cell title="必修课总学分（分）" :value="pyfa.bxkxf"></mt-cell>
      <mt-cell title="学位课学分（分）" :value="pyfa.xwkxf"></mt-cell>
    </div>
    <div v-if="!!infoData" class="mainTitle g-mar-top30 g-mar-bottom20">已选课程统计</div>
    <div v-if="!!pyfa" class="infoBox">
      <mt-cell title="必修课程总数（门）" :value="infoData.jhbxkms"></mt-cell>
      <mt-cell title="选修课程总数（门）" :value="infoData.jhxxkms"></mt-cell>
      <mt-cell title="学位课课程总数（门）" :value="infoData.jhxwkms"></mt-cell>
      <mt-cell title="总学分（分）" :value="infoData.jhbxkxf + infoData.jhxxkxf || 0"></mt-cell>
      <mt-cell title="选修课总学分（分）" :value="infoData.jhxxkxf"></mt-cell>
      <mt-cell title="必修课总学分（分）" :value="infoData.jhbxkxf"></mt-cell>
      <mt-cell title="学位课学分（分）" :value="infoData.jhxwkxf"></mt-cell>
    </div>
    <!-- 必修课程总数（门）：<span :style="(countErr === 3 ? 'color:red' : '' )">{{ pyjh.jhbxkms }}</span>，
        选修课程总数（门）：<span :style="(countErr === 5 ? 'color:red' : '' )">{{ pyjh.jhxxkms }}</span>，
        学位课课程总数（门）：<span :style="(countErr === 7 ? 'color:red' : '' )">{{ pyjh.jhxwkms }}</span>，
        总学分（分）：<span :style="(countErr === 0 || countErr === 1 ? 'color:red' : '' )">{{ +pyjh.jhbxkxf +  pyjh.jhxxkxf || 0}}</span>，
        选修课总学分（分）：<span :style="(countErr === 4 ? 'color:red' : '' )">{{ pyjh.jhxxkxf }}</span>，
        必修课总学分（分）：<span :style="(countErr === 2 ? 'color:red' : '' )">{{ pyjh.jhbxkxf }}</span>，
        学位课学分（分）：<span :style="(countErr === 6 ? 'color:red' : '' )">{{ pyjh.jhxwkxf }}</span> -->
    <div v-if="!!courseData" class="mainTitle g-mar-top30 g-mar-bottom20">培养计划课程</div>

    <div v-if="!!courseData" class="courseData" v-for="(item, index) in courseData">
      <mt-cell :title="item.kcdm">
        <span>{{ item.kcmc }}</span>
        <a @click="detail(item)" class="link">详情</a>
      </mt-cell>
    </div>

    <mt-popup position="right" class="mint-popup" v-model="popupVisible">
      <div class="popupCon">
        <mt-cell title="课程代码" :value="detailData.kcdm || '--'"></mt-cell>
        <mt-cell title="课程名称" :value="detailData.kcmc || '--'"></mt-cell>
        <mt-cell title="学时" :value="detailData.xs || '--'"></mt-cell>
        <mt-cell title="学分" :value="detailData.xf || '--'"></mt-cell>
        <mt-cell title="修课要求" :value="detailData.bxhxxmc || '--'"></mt-cell>
        <mt-cell title="是否学位课" :value="detailData.sfxwkmc || '--'"></mt-cell>
        <mt-cell title="导师审核状态" :value="detailData.kcshztmc || '--'"></mt-cell>
        <mt-cell title="课程类别" :value="detailData.kclxmc || '--'"></mt-cell>
        <mt-cell title="审核意见" :value="detailData.shyj || '--'"></mt-cell>
      </div>
    </mt-popup>
    <div class="mint-popup-layerBtn" v-if="popupVisible">
      <mt-button @click="popupVisible = false" size="small" type="primary">关闭</mt-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { teacherPyjhDetail } from '@/api'
import { Indicator } from 'mint-ui'

export default {
  name: 'resume',
  data() {
    return {
      countErr: -1,
      pyfa: '',
      noData: false,
      detailData: '',
      infoData: '',
      courseData: '',
      processData: '',
      popupVisible: false
    }
  },
  methods: {
    getTeacherClientInfo() {
      const id = this.$route.query ? this.$route.query.id : ''
      Indicator.open()
      request
        .get(`${teacherPyjhDetail}${id}`, {})
        .then((res) => {
          Indicator.close()
          const r = res.data
          if (r && r.data) {
            this.infoData = r.data.pyjh || {}
            this.pyfa = r.data.pyfa || {}
            this.courseData = r.data.pyjhkcList || []
            this.processData = r.data.pyjhPkcList || []
          } else {
            this.noData = true
          }
        })
        .catch((err) => {})
    },
    detail(item) {
      this.detailData = item
      this.popupVisible = true
    }
  },
  mounted() {
    console.log(this.$route.query)
    this.getTeacherClientInfo()
  }
}
</script>

<style scoped lang="less">
@import url('../../../../assets/styles/base.less');
.resume {
  .link {
    white-space: nowrap;
  }
  .infoBox {
    margin-top: (20 / @base);
  }
  .link {
    margin-left: (30 / @base);
  }
  .infoTable {
    padding-bottom: (15 / @base);
    padding-right: (15 / @base);
    table {
      width: 100%;
    }
    th,
    td {
      font-size: (24 / @base);
      color: #666;
      font-weight: normal;
      width: 25%;
      text-align: center;
      border: 1px solid #d9d9d9;
    }
    th {
      color: #999;
    }
  }
}
</style>
